<template>
	<view class="">
		<view class="boxs">
			<view class="w100 flexenters  bgfff bor4 mt30">
				<view class="flexCenter w100">
					<image class="w40" :src="users.avatar" mode=""></image>
					<view class="ml10">
						<view class="flexCenter">
							<view class="co989BA6 f12">姓名：</view>
							<view class="">{{users.userName}}</view>
						</view>
						<view class="flexCenter">
							<view class="co989BA6 f12">电话：</view>
							<view class="">{{users.phonenumber}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="w100 flexenters  bgfff bor4 mt30">
				<view class="flexCenter w100">
					<image class="w60s" :src="good_details.goodsCover" mode=""></image>
					<view class="w60">
						<view class="f30 bold co34363D">{{good_details.goodsName}}</view>
						<view class="flexenters w100">
							<view class="Colororgin">
								<text class="f36">{{good_details.exchangeScore}}</text>
								<text class="f24">积分</text>
							</view>
							<view class="co989BA6 f12">共{{exchangeCount}}件</view>
						</view>
					</view>
				</view>
			</view>
			<view class="w100  bgfff bor4s mt30">
				<view class="w100 flexenters p50" style="border-bottom: 1px solid #F4F7FD;">
					<view class="co989BA6 f30">支付方式</view>
					<view class="co34363D f30">积分兑换</view>
				</view>
				<view class="w100 flexenters p50">
					<view class="co989BA6 f30">合计</view>
					<view class="co017EFE f30">{{total}}积分</view>
				</view>
			</view>
			<view class="w100 bgfff mt50">
				<view class="p5 ">
					<view class="bg017EFE juCen flexCenter" style="border-radius: 8px;" @click="coins">
						<view class="f36 colorfff bold " style="padding: 5px 0;">立即兑换</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from "@/serve/api/home.js";
	export default {
		data() {
			return {
				goodsId:'',
				exchangeCount:1,
				good_details:'',
				total:0,
				users:'',
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId
			this.exchangeCount = e.exchangeCount
			this.total = e.total
			this.my_line()
			this.goods()
		},
		methods: {
			//用户信息
			async my_line(){
				const res = await home.selectSysUserById({})
				this.users = res.data.data
			},
			async goods() {
				let parme = {
					goodsId:this.goodsId,
				}
				const res = await home.selectGoodsIntegralInfo(parme)
				this.good_details = res.data.data
			},
			async coins(){
				let parme = {
					goodsId:this.goodsId,
					exchangeCount:this.exchangeCount
				}
				const res = await home.orderExchange(parme)
				if(res.data.code == 0){
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					uni.reLaunch({
						url:'../../tabbar/mine/mine'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">

	.boxs {
		padding: 0 20px 20px 20px;
		box-sizing: border-box;
	}

	.co34363D {
		color: #34363D;
	}

	.co989BA6 {
		color: #989BA6;
	}

	.co017EFE {
		color: #017EFE;
	}

	.bor4 {
		border-radius: 8px;
		padding: 15px;
		box-sizing: border-box;
	}
	.bor4s {
		border-radius: 8px;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.w60 {
		width: calc(100% - 80px);
		height: 60px;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 20px;
	}

	.Colororgin {
		color: #FF5753;
	}

	.w60s {
		width: 60px;
		height: 60px;
		border-radius: 8px;
	}

	.w40 {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.ml10{
		margin-left: 10px;
	}
	.p50{
		padding: 20px 0;
	}
	.bg017EFE{
		background-color: #007AFF;
	}
	.mt50{
		margin-top: 70px;
	}
</style>
